<template>
  <div class="info">
    <div class="totalnum">
      <span>总数:</span>
      <i>{{totalnum}}</i>
    </div>
    <div class="totalprice">
      <span>总价:</span>
      <i>{{totalprice}}</i>
    </div>
    <div class="clearcart">
      <div class="btn" @click="cls">清空购物车</div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters('cart', ['totalprice', 'totalnum'])
  },
  methods: {
    ...mapMutations('cart', ['clear']),
    cls () {
      this.clear()
    }
  }
}
</script>
<style lang="scss" scoped>
.info {
  height: 40px;
  background: #eee;
  display: flex;
  align-items: center;
  div {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  .btn {
      height: 40px;
      background: red;
      border-radius: 4px;
      line-height: 40px;
  }
}
</style>
